class Enlarge
{
    constructor(el,options={}){//相当于是普通属性的定义和方法，所以this是实例化对象
    this.el=document.querySelector(el)
    this.img=this.el.querySelector(".img")
    this.mask=this.el.querySelector(".mask")
    this.enlarge=this.el.querySelector(".enlarge")
    this.init()
    }
    init(){//相当于是原型的方法，=this.prototype.init(),所以是在构造函数的自定义
        this.overOut()
        this.maskMove()
        
    }
    overOut(){//移入移出
    this.img.onmouseover=()=>{//移入的时候遮罩框和下面的大框显示
    this.mask.style.display=this.enlarge.style.display="block"
    }
    this.img.onmouseout=()=>{//移出的时候遮罩框和下面的大框隐藏
    this.mask.style.display=this.enlarge.style.display="none"
    }
    }
    maskMove(){//遮罩框移动
    this.img.onmousemove = (evt)=>{//用箭头函数让this为实例化对象
    let e=evt||window.event
    let X=e.pageX-this.el.offsetLeft-this.mask.offsetWidth/2
    let Y=e.pageY-this.el.offsetTop-this.mask.offsetHeight/2
    //判断遮罩框的限制
    if(X<0)X=0
    if(Y<0)Y=0
    let maxLeft=this.img.offsetWidth-this.mask.offsetWidth//最大值是图片宽度/高度-自身宽度高度
    let maxTop=this.img.offsetHeight-this.mask.offsetHeight
    if(X>maxLeft) X=maxLeft
    if(Y>maxTop)  Y=maxTop
    this.mask.style.left=X+"px"
    this.mask.style.top=Y+"px"
    this.tbEnlarge(X,Y)
    }
    }
    tbEnlarge(X,Y){
        this.enlarge.style.backgroundPosition =`-${X*2}px -${Y*2}px`
    }
 
}
export default Enlarge